<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Corporate Manage Request Rigodon</title>

<!--<script src="../js/jquery-1.9.0-min.js" type="text/javascript"></script>--> 
<script src="../js/jquery-1.9.1.js" type="text/javascript"></script>
<script src="../css/bootstrap/js/bootstrap.min.js" type="text/javascript"></script> 
	
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> 
<!-- <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> -->
<link rel="stylesheet" href="/resources/demos/style.css" />

<link rel="stylesheet" type="text/css" href="../css/bootstrap/css/bootstrap.min.css">

<link rel="stylesheet" type="text/css" href="../css/bootstrap/css/bootstrap-glyphicons.css">
<link rel="stylesheet" type="text/css" href="../css/webpages/dashboard.css">
<link rel="stylesheet" type="text/css" href="../css/manage-seat.css"> 

<script src="../js/jquery-1.10.2.js" type="text/javascript"></script>
<script src="../js/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>
 
<script src="../js/jquery.maphilight.js" type="text/javascript"></script>
 
 <script type="text/javascript">
	$(function() { 
		$('#formForCheckBox').hide();
		$('#btnMap').hide();
		
		$('#save-message').hide();
		$('#confirm-message').hide();
		
		$('.map').maphilight({
            fillColor: '008800'
        });

        $('#starlink').click(function(e) {
            e.preventDefault();
            var data = $('#star').data('maphilight') || {};
			var data2 = $('#star2').data('maphilight') || {};
            data.neverOn = !data.neverOn;
			data2.neverOn = !data.neverOn;
            $('#star').data('maphilight', data);
			$('#star2').data('maphilight', data);
        });

        $('#quadrantA,#starlink').click(function(e) {
            e.preventDefault();
            var data = $('#quadrantA').mouseout().data('maphilight') || {};
            data.alwaysOn = !data.alwaysOn;
            $('#quadrantA').data('maphilight', data).trigger('alwaysOn.maphilight');
        });
		
		
        $('#quadrantB,#starlink').click(function(e) {
            e.preventDefault();
			var data = $('#quadrantB').mouseout().data('maphilight') || {};
			data.alwaysOn = !data.alwaysOn;
			$('#quadrantB').data('maphilight', data).trigger('alwaysOn.maphilight');
        });
		
		   $('#quadrantC,#starlink').click(function(e) {
            e.preventDefault();
            var data = $('#quadrantC').mouseout().data('maphilight') || {};
            data.alwaysOn = !data.alwaysOn;
            $('#quadrantC').data('maphilight', data).trigger('alwaysOn.maphilight');
        });
		
		
        $('#quadrantD,#starlink').click(function(e) {
            e.preventDefault();
			var data = $('#quadrantD').mouseout().data('maphilight') || {};
			data.alwaysOn = !data.alwaysOn;
			$('#quadrantD').data('maphilight', data).trigger('alwaysOn.maphilight');
        });
		
});</script>

 <script type="text/javascript">
	$(function() {
	
		$('#btnSave').click(function(e) {
			e.preventDefault;
			 $( "#save-message" ).dialog({
					modal: true,
					buttons: {
					Ok: function() {
						$( this ).dialog( "close" );
					}
				}
			});
		});
		
		$('#btnConfirm').click(function(e) {
			e.preventDefault;
			 $( "#confirm-message" ).dialog({
					modal: true,
					buttons: {
					Ok: function() {
						$( this ).dialog( "close" );
					}
				}
			});
		});
	
	
	});
</script>
</head>
<body>


	<div class="navbar navbar-fixed-top navbar-inverse">
		<div class="container">
			<a href="DashboardPM.html"><img src="../images/seatpoint-white-border.png" /></a>
			<button class="navbar-toggle" type="button" data-toggle="collapse"
				data-target="#navbar-main">
				<span class="icon-bar"></span> <span class="icon-bar"></span> <span
					class="icon-bar"></span>
			</button>

			<div class="nav-collapse collapse navbar-inverse-collapse"
				id="navbar-main">
				<ul class="nav navbar-nav">

					<li><a href="Home">Home</a></li>
					<li  class="active"><a href="ManageRigodon">Manage Rigodon</a></li>
					<li><a href="ManageSeat">Seat Request</a></li>
					<li><a href="View Full Map">View Full Map</a></li>
				</ul>
				<ul class="nav navbar-nav pull-right">
					<li><a href="#"><span class="glyphicon glyphicon-globe"></span></a>
					</li>
					<li class="dropdown"><a class="dropdown-toggle"
						data-toggle="dropdown" href="#" id="themes">Hi Jean! <span
							class="caret"></span>
					</a>
						<ul class="dropdown-menu" aria-labelledby="setting">
							<li><a tabindex="-1" href="login.html">Logout</a></li>
							<li class="divider"></li>
							<li><a tabindex="-1" href="under-construction.html">Help</a></li>

						</ul></li>

				</ul>
			</div>

		</div>
	</div>

	<div class="container">
		<div class="page-header" id="banner">
			<div class="col-lg-6">
                    <img src="../images/seatpoint-logo-sub.png" />
                </div>
		</div>
		
		<div class="row">
			<ol class="breadcrumb">
			  <li><a href="#">Manage Rigodon</a></li>
			  <li>Assign Seat Allocation</li>
			</ol>
		</div>
		
		<div class="row">
			<div class="col-lg-6">
				<div class="form-group">
					<div class="input-group">
						<input type="text" class="form-control"> <span
							class="input-group-btn">
							<button class="btn btn-default" type="button" value="search">Search</button>
						</span>
					</div>
				</div>
			</div>
		</div>
		
		<div class="btn-group">
		  <div class="btn-group">
			<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
			  Select Project Manager
			  <span class="caret"></span>
			</button>
			<ul class="dropdown-menu">
			  <li ><a id="ahrefPM1" href="#">Project Manager 1</a></li>
			  <li ><a id="ahrefPM2" href="#">Project Manager 2</a></li>
			</ul>
		  </div>
		</div>
		<br/>
		
		<!-- first form from dropdown choice of PM1 -->
		<div id="formForPM1" class="row" style="display:none;">
			<div class="col-lg-6">
				<ul class="list-group list-unstyled">
					<li class="list-unstyled">
						<label># of Resources</label>
						<span>40</span>
					</li>
					<li class="list-unstyled">
						<label>Preferred:  Area/Floor/Quadrant:</label>
						<span>PIC-3F-A</span>
					</li>
					<li class="list-unstyled">
						<label>Preferred Date:</label>
						<span>01/01/2013</span>
					</li>
				</ul>
			</div>
			<div class="col-lg-6">
				<ul class="list-group list-unstyled">
					<li class="list-unstyled">&nbsp;</li>
					<li class="list-unstyled">&nbsp;</li>
					<li class="list-unstyled">
						<label># of Seat Allocated / # of Seat Requested</label>
					<li>
				</ul>
			</div>
		</div>

		<!-- first form from dropdown choice of PM2 -->
		<div id="formForPM2" class="row" style="display:none;">
			<div class="col-lg-6">
				<ul class="list-group list-unstyled">
					<li class="list-unstyled">
						<label># of Resources</label>
						<span>20</span>
					</li>
					<li class="list-unstyled">
						<label>Preferred:  Area/Floor/Quadrant:</label>
						<span>PIC-4F-A</span>
					</li>
					<li class="list-unstyled">
						<label>Preferred Date:</label>
						<span>01/01/2013</span>
					</li>
				</ul>
			</div>
			<div class="col-lg-6">
				<ul class="list-group list-unstyled">
					<li class="list-unstyled">&nbsp;</li>
					<li class="list-unstyled">&nbsp;</li>
					<li class="list-unstyled">
						<label># of Seat Allocated / # of Seat Requested</label>
					<li>
				</ul>
			</div>
		</div>
		
		<!-- <div id="formForCheckBox"class="row" style="display:none;"> -->
		<div id="formForCheckBox"class="row" >
			<div class="col-lg-2">
				<ul class="list-group list-unstyled">
					<li class="list-group-item" style="border-width:0px;">
						<input id="chkSelectAll" type="checkbox" > Select All
					</li>
					<li class="list-group-item" style="border-width:0px;">
						<input id="chkSelectQuadrant" type="checkbox" > Select Quadrant 
					</li>
					<li class="list-group-item" style="border-width:0px;">
						<input id="chkSelectBlock" type="checkbox" > Select Block
					</li>
					<li class="list-group-item" style="border-width:0px;">
						<input id="chkSelectList" type="checkbox" > Select List
					</li>
				</ul>
			</div>	

			<div class="col-lg-10" >
				<img id="seatmap-3F" src="../images/PIC3F-933x730.PNG" alt="seatmap-3F" class="map" width="930" height="730" usemap="#seatmap">
				<map name="seatmap">
					<area id="quadrantA" shape="rect" coords="40,421,333,696" href="#" alt="quadrantA" class="group" data-maphilight='{"strokeColor":"18BC9C;","strokeWidth":5,"fillColor":"15A589","fillOpacity":0.6}'>
					<area id="quadrantB" shape="rect" coords="445,421,882,696" href="#" alt="quadrantB" class="group" data-maphilight='{"strokeColor":"18BC9C;","strokeWidth":5,"fillColor":"15A589","fillOpacity":0.6}'>
					<area id="quadrantC" shape="rect" coords="445,23,882,300" href="#" alt="quadrantC" class="group" data-maphilight='{"strokeColor":"18BC9C;","strokeWidth":5,"fillColor":"15A589","fillOpacity":0.6}'>
					<area id="quadrantD" shape="rect" coords="90,23,431,300" href="#" alt="quadrantD" class="group" data-maphilight='{"strokeColor":"18BC9C;","strokeWidth":5,"fillColor":"15A589","fillOpacity":0.6}'>
				</map> 
			</div> 
		</div>

		<div id="btnMap" class="row" >
			<div class="col-lg-6"></div>
			<div class="col-lg-6" >
				<ul class="list-inline list-unstyled" style="float:right;">
					<li class="list-unstyled">
						<button id="btnSave" type="submit" class="btn btn-default">Save</button>
					</li>
					<li class="list-unstyled">
						<button id="btnConfirm" type="submit" class="btn btn-default">Confirm & Notify PM's</button>
					</li>
				</ul>
			
				
			</div>
		</div>
		
		<div id="save-message" title="Save Request" >
			<p id="savemessagedialog">
			<span class="ui-icon ui-icon-circle-check" style="float: left; margin: 0 7px 50px 0;"></span>
				All changes have been saved.
			</p>
			
		</div>
		
		<div id="confirm-message" title="Confirm Request" >
			<p id="confirmmessagedialog">
			<span class="ui-icon ui-icon-circle-check" style="float: left; margin: 0 7px 50px 0;"></span>
				Seat Allocation confirmed and notified to PM's.
			</p>
		</div>
		
		
	</div> <!--end div for container-->
	
	<script type="text/javascript">
		$('#ahrefPM1').click(function() {
		
			$('#formForPM1').show();
			$('#formForPM2').hide();
			$('#formForCheckBox').show();
			$('#btnMap').show();

		});
		
		$('#ahrefPM2').click(function() {
			$('#formForPM1').hide();
			$('#formForPM2').show();
			$('#formForCheckBox').show();
			$('#btnMap').show();
		});
	</script> 
	
<hr>
	<div class="bs-docs-section">Test</div>
	
</body>
	
	<footer>
	<div class="row">
		<div class="col-lg-12">
			<p>&copy; 2013</p>
			<p>
				<a href="http://www.pointwset.com">www.pointwest.com</a>.
			</p>
			<p>Group 1</p>
		</div>
	</div>
	</footer>
	</div>